<template>
	<div class="layout-container">
		<el-button class="addButton" size="large" @click="showHospital">新增医院</el-button>
		<!-- 表单 -->
		<el-table class="layout-table" border :data="tableData">
			<el-table-column type="index" prop="index" label="序号" width="80px" align="center"></el-table-column>
			<el-table-column prop="hospitalName" label="医院名称" align="center"></el-table-column>
			<el-table-column prop="contact" label="联系人" align="center"></el-table-column>
			<el-table-column prop="phone" label="联系方式" align="center"></el-table-column>
			<el-table-column label="操作" align="center">
				<template #default="scope">
					<el-button size="small" class="editButton" @click="EditHospital(scope.row.id)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页器 -->
		<el-pagination class="layout-page" :page-sizes="[10]" background
			layout="prev, pager, next, sizes, jumper, total," :total="total" v-model:current-page="data.pageNum"
			v-model:page-size="data.pageSize" @current-change="getHospitalList(data)" @size-change="changePages">
		</el-pagination>
		<!-- 点击显示对话框 -->
		<!-- 添加 -->
		<Add v-model="showAdd" :showAdd="showAdd" @confirm="addConfirm" @cancle="addCancle"></Add>
		<Edit v-model="showEdit" :showEdit="showEdit" :id="EditId" @confirm="editOk" @cancle="editCancle"></Edit>
	</div>

</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { reqHospitialList } from '@/api/hospital';
import Add from './Add.vue';
import Edit from './Edit.vue';
import { useStore } from 'vuex';
const store = useStore();

const showAdd = ref(false);
const showEdit = ref(false);
const total = ref(0);
// 请求医院数据
const tableData = ref([]);
// 获取医院列表参数
const data = reactive({
	"pageNum": 1,
	"pageSize": 10,
})


// 定义获取医院信息列表
const getHospitalList = async (data: any) => {
	const result: any = await reqHospitialList(data);
	// console.log("result获取列表",result);
	if (result.data.code === 0) {
		total.value = JSON.parse(result.data.result.total);
		tableData.value = result.data.result.records;
	}
}
const changePages = () => {
	data.pageNum = 1;
	getHospitalList(data);
}
// 新增医院
const showHospital = () => {
	showAdd.value = true;
}

// 点击编辑
const EditId = ref("");
const EditHospital = (id: any) => {
	EditId.value = id;
	showEdit.value = true;
}
// 添加确定
const addConfirm = () => {
	showAdd.value = false;
	// 调用新增医院列表
	getHospitalList(data);

}
// 添加取消
const addCancle = () => {
	showAdd.value = false;
}

onMounted(() => {
	store.commit('updateTitle', '系统设置');
	getHospitalList(data);
})
// 编辑确定
const editOk = () => {
	showEdit.value = false;
	getHospitalList(data);
}
// 编辑取消
const editCancle = () => {
	showEdit.value = false;
}
</script>
<style lang="scss" scoped>
.layout-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: end;

	.addButton {
		width: 100px;
		border: 1px solid $base-table-fontColor;
		color: $base-table-fontColor;
	}

	// 表单
	.layout-table {
		width: 100%;
		margin: 20px 0px 20px;

		.editButton {
			border: 0px;
			color: $base-table-fontColor;
		}

	}

	// 分页
	.layout-page {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 20px;
	}
}
</style>